<template>
  <div class="transportBillDetail">
    <div class="top">
      <div class="top_l">
        <div class="company">
          <img src="~@/assets/images/联系人@3x.png" class="logo" />
        </div>
        <div class="userinfo">
          <div class="transportNumber">
            {{ detailParams.transportNumber }}
            <i style="margin-left: 10px" type="primary" class="el-icon-copy-document" @click="copyTaskNumber" />
            <span class="documentStatus" :style="getStatusStyle(detailParams.documentStatus)">
              {{ getStatusText(detailParams.documentStatus) }}
            </span>
          </div>
          <div>{{ detailParams.licensePlate }} {{ detailParams.driverName }}</div>
        </div>
      </div>
      <div class="top_r">
        <el-button @click="edit">删除</el-button>
      </div>
    </div>

    <div class="bottom">
      <div class="left">
        <p class="title">基础信息</p>
        <el-row>
          <el-col span="8" class="mb20">
            计划单号：<span
              style="color: #3274f6; cursor: pointer"
              @click="navigateToDetail(detailParams.id, 'taskNumber')"
            >
              {{ detailParams.taskNumber }}
            </span>
          </el-col>
          <el-col span="8" class="mb20">
            物流单号：<span
              style="color: #3274f6; cursor: pointer"
              @click="navigateToDetail(detailParams.id, 'logisticsNumber')"
            >
              {{ detailParams.logisticsNumber }}
            </span>
          </el-col>
          <el-col span="8" class="mb20">供应商：{{ detailParams.supplier }}</el-col>
          <el-col span="8" class="mb20">起点：{{}}</el-col>
          <el-col span="8" class="mb20">终点：{{}}</el-col>
          <el-col span="8" class="mb20">船名：{{ detailParams.driverName }}</el-col>
        </el-row>

        <p class="title">申请信息</p>
        <el-row>
          <el-col span="8" class="mb20">物流公司：{{ detailParams.logisticsCompany }}</el-col>
          <el-col span="8" class="mb20">司机姓名：{{ detailParams.driverName }}</el-col>
          <el-col span="8" class="mb20">司机手机号：{{ detailParams.driverPhone }}</el-col>
          <el-col span="8" class="mb20">物料名称：{{}}</el-col>
          <el-col span="8" class="mb20">对方毛重(吨)：{{ detailParams.externalGrossWeight }}</el-col>
          <el-col span="8" class="mb20">对方净重(吨)：{{ detailParams.externalNetWeight }}</el-col>
          <el-col span="8" class="mb20">车型：{{ detailParams.vehicleType }}</el-col>
          <el-col span="8" class="mb20">是否集装箱：{{ detailParams.isContainer }}</el-col>
          <el-col span="8" class="mb20">是否金典：{{ detailParams.isJindian }}</el-col>
          <el-col span="8" class="mb20">置换类型：{{ detailParams.swapType }}</el-col>
          <el-col span="8" class="mb20">开卡单据：{{ detailParams.cardDocument }}</el-col>
        </el-row>

        <p class="title">开卡信息</p>
        <el-row>
          <el-col span="8" class="mb20">卡号：{{}}</el-col>
          <el-col span="8" class="mb20">卸货区域：{{}}</el-col>
          <el-col span="8" class="mb20">开卡物料名称：{{}}</el-col>
          <el-col span="8" class="mb20">客户名称：{{}}</el-col>
          <el-col span="8" class="mb20">磅单净重(吨)：{{}}</el-col>
          <el-col span="8" class="mb20">电子磅单：{{}}</el-col>
        </el-row>

        <p class="title">系统信息</p>
        <el-row>
          <el-col span="8" class="mb20">创建人：{{ detailParams.createBy }}</el-col>
          <el-col span="8" class="mb20">创建时间：{{ detailParams.createTime }}</el-col>
          <el-col span="8" class="mb20">创建来源：{{ detailParams.creationSource }}</el-col>
        </el-row>
      </div>
      <div class="right">
        <p class="title">单据进度</p>
        <el-steps :space="65" direction="vertical" :active="getCurrentIndex()" align-center>
          <el-step v-for="(item, index) in timelineData" :key="index" :title="item.title" :description="item.time">
            <!-- 使用 icon 插槽 -->
            <template v-slot:icon>
              <div :class="getCustomIconClass(item.status)">
                <i :class="getCustomIcon(item.status)" />
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage'
import beiGangApi from '@/api/logistics/beigang'
export default {
  name: 'TransportBillDetail',
  components: {
    LPTablePage
  },
  data() {
    return {
      detailParams: {},
      timelineData: [
        { title: '待开卡', time: '2024-08-11 09:08:23', status: 'done' },
        { title: '待审核', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '等待排队', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '排队中', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '等待进厂', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '进厂', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '一次过磅', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '入库', time: '2024-08-11 10:08:23', status: 'done' },
        { title: '二次过磅', time: '2024-08-11 10:08:23', status: 'current' },
        { title: '出厂', time: '2024-08-11 10:08:23', status: 'pending' }
      ]
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    navigateToDetail(id, type) {
      if (type === 'taskNumber') {
        this.$router.push({ path: `/logistics/beiGang/transportDetail/${id}` })
      } else if (type === 'logisticsNumber') {
        this.$router.push({ path: `/logistics/beiGang/logisticsBillDetail/${id}` })
      } else if (type === 'transportNumber') {
        this.$router.push({ path: `/logistics/beiGang/transportBillDetail/${id}` })
      }
    },
    getStatusText(status) {
      switch (status) {
        case 1:
          return '待审核'
        case 2:
          return '执行中'
        case 3:
          return '已完成'
        case 4:
          return '已取消'
        case 5:
          return '已驳回'
        default:
          return '未知状态'
      }
    },
    getStatusStyle(status) {
      switch (status) {
        case 1:
          return { color: '#dca550', backgroundColor: '#eeeae5', padding: '2px 6px', borderRadius: '4px' }
        case 2:
          return { color: '#5a9cf8', backgroundColor: '#eef5fe', padding: '2px 6px', borderRadius: '4px' }
        case 3:
          return { color: '#7ec050', backgroundColor: '#e4ede5', padding: '2px 6px', borderRadius: '4px' }
        case 4:
          return { color: '#606266', backgroundColor: '#e6e8ec', padding: '2px 6px', borderRadius: '4px' }
        case 5:
          return { color: '#e47470', backgroundColor: '#eee5e8', padding: '2px 6px', borderRadius: '4px' }
        default:
          return { color: 'black', padding: '2px 6px', borderRadius: '4px' }
      }
    },
    // 复制按钮
    copyTaskNumber() {
      const taskNumber = this.detailParams.taskNumber
      if (taskNumber) {
        navigator.clipboard
          .writeText(taskNumber)
          .then(() => {
            this.$message.success('任务编号已复制到剪贴板！')
          })
          .catch((err) => {
            console.error('复制失败:', err)
            this.$message.error('复制失败，请重试！')
          })
      }
    },
    getCustomIconClass(status) {
      switch (status) {
        case 'done':
          return 'done-icon'
        case 'current':
          return 'current-icon'
        case 'pending':
          return 'pending-icon'
        default:
          return 'default-icon'
      }
    },
    // 返回不同状态下的图标
    getCustomIcon(status) {
      if (status === 'done') {
        return 'el-icon-check' // 蓝色对号
      } else if (status === 'current' || status === 'pending') {
        return '' // 空图标
      }
    },
    getCurrentIndex() {
      // 获取当前步骤的索引
      return this.timelineData.findIndex((item) => item.status === 'current')
    },
    getDetail() {
      const id = this.$route.params.id
      beiGangApi.getTransportBillDetail(id).then((res) => {
        if (res.code == 200 && res.data) {
          this.detailParams = res.data
        }
      })
    },
    edit() {
      this.$confirm('确定删除吗', '取消', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        closeOnClickModal: false
      }).then(() => {
        this.$message.success('删除成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.transportBillDetail {
  padding: 30px;

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .top_l {
      display: flex;

      .userinfo {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .transportNumber {
          font-size: 16px;
          font-weight: 700;
        }
        .taskStatus {
          margin-left: 10px;
          text-align: center;
        }
      }
    }
  }
  .bottom {
    display: flex;
    .left {
      flex: 7;
    }
    .right {
      flex: 2;
      ::v-deep .el-step__title {
        font-size: 15px;
        color: #000;
      }
      ::v-deep .el-step__description {
        color: #999;
      }
      ::v-deep .el-step__head.is-finish .el-step__icon-inner {
        color: #cde4ff; // 已完成状态的颜色
      }
      ::v-deep .el-step__icon-inner {
        font-size: 30px;
      }
      ::v-deep .el-step__head.is-process .el-step__icon-inner {
        color: #2196f3; // 当前状态的颜色
      }

      ::v-deep .el-step__head.is-wait .el-step__icon-inner {
        color: #aaaaaa; // 待处理状态的颜色
      }
    }
    .title {
      font-size: 18px;
      font-weight: 700;
    }
  }
}
.company {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #0076ff;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
  margin-right: 16px;

  .logo {
    width: 51px;
    height: 51px;
  }
}
::v-deep .el-step__icon {
  display: inline-block;
  border: 0;
}
::v-deep .el-step.is-vertical .el-step__line {
  left: 14px;
  background-color: #2196f3;
}
::v-deep .el-step.is-vertical .el-step__main {
  padding-left: 15px;
}

.done-icon {
  width: 30px;
  height: 30px;
  background-color: #f1f7fe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.done-icon i {
  font-size: 14px;
  color: #2196f3;
}

.current-icon {
  width: 30px;
  height: 30px;
  background-color: #3274f6; /* 蓝色圆背景 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-icon::after {
  content: '';
  width: 18px;
  height: 18px;
  background-color: #ffffff; /* 白色圆圈 */
  border-radius: 50%;
}

.pending-icon {
  width: 30px;
  height: 30px;
  background-color: #f2f2f2; /* 灰色圆背景 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pending-icon::after {
  content: '';
  width: 18px;
  height: 18px;
  background-color: #ffffff; /* 白色圆圈 */
  border-radius: 50%;
}
</style>
